# jQuery

JavaScript 框架，简化 JS 开发，本质上就是一些 JS 文件，封装了 JS 的原生代码

不带 min 的和带 min 的版本区别在于格式、缩进、大小、注释。一个用于开发环境，一个用于生产环境

区别：

• jQuery 的加载比 js 快，jQuery 在 dom 树结构绘制完毕就会加载；而 js 在整个页面加载完毕才加载
• jQuery 没有覆盖问题，并且按顺序执行；而 js 存在覆盖问题

# 基本语法

• 语法：$(CSS选择器)或jQuery(CSS选择器)，jQuery 对象内部以**==数组==存储匹配的数据**，若只有一个，索引号为 0

• 对象转换（jQuery 对象和 JS 对象无法互相操作属性和方法）

  • JS-->jQuery：$(JS对象)
  • jQuery-->JS：$(选择器)[0]或$(选择器).get(0)

• 绑定事件（去掉 JS 事件中 on 即可，并给事件方法传入 function 对象）

  $("#id1").click(function() {
    //。。。
  });
  

• 入口函数（DOM 树加载完毕执行）：区别在于 onload 只能定义一次，否则覆盖；而 ready 可以定义多次

  //$(document).ready(function(){   //精简如下
  $(function() {});
  

# 选择器

在字符串中

• 基本选择器

  • #id
  • .class
  • element
  • * ：选择所有元素

• 组合选择器

  组合	选择
  A,B	选择所有 A 元素和 B 元素
  A B	==后代选择器==（B是 A 的所有后代结点，如子节点或者孙节点），可能多个
  A > B	==子选择器==（B是 A 的直接子节点），可能多个
  A + B	==相邻兄弟选择器==（AB 有相同的父结点，B是 A 的紧跟着的兄弟节点），只能一个
  A ~ B	==一般兄弟选择器==（AB 有相同的父节点，B是 A之后的所有兄弟节点），可能多个

• 属性选择器（值要加引号）

  属性	选择
  ==[attr]==	带有以 attr 命名的属性的元素
  ==[attr='value']==	带有以 attr 命名的，且**值为"value"**的属性的元素。
  ==[attr!='value']==	带有以 attr 命名的，且值不为"value"的属性的元素或没有这个属性的元素
  [attr~=value]	带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"
  [attr|=value]	带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）
  ==[attr^=value]==	表示带有以 attr 命名的，且值是以"value"开头的属性的元素
  ==[attr$=value]==	表示带有以 attr 命名的，且值是以"value"结尾的属性的元素
  ==[attr=value*]==	表示带有以 attr 命名的，且值包含有"value"的属性的元素
  ==[attr1='value1'][attr2='value2']...==	复合属性选择器，需要同时满足多个条件时使用。

• 基本过滤选择器

  • :first：首元素选择器，获得选择的元素中的第一个元素
  • :last：尾元素选择器，获得选择的元素中的最后一个元素
  • :not(selector)：非元素选择器，不包括指定内容的元素。如：1234:not(3)--->124
  • :even：偶数选择器，从 0 开始计数。操作索引号，页面显示奇数项
  • :odd：奇数选择器，从 0 开始计数
  • :eq(index)：等于索引选择器，等于指定索引元素
  • :gt(index)：大于索引选择器，大于指定索引元素
  • :lt(index)：小于索引选择器，小于指定索引元素
  • :header：标题选择器，获得标题（h1~h6）元素，固定写法
  • :animated：获得动画的
  • :focus：获得焦点
  • :first-child：第一个子元素
  • :last-child：最后一个子元素
  • ……

• 表单属性过滤选择器

  • :enabled：可用元素选择器，获得可用元素
  • :disabled：不可用元素选择器，获得不可用元素
  • :checked：选中选择器（radio、checkbox）
  • :selected：选中选择器（select）
  • :input：匹配所有 input, textarea, select 和 button 元素

• 内容过滤选择器

  • :contains：匹配包含指定文本的元素

# DOM 操作

• 内容操作
  • html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
  • text()：获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容，设置时将 font 也删去了
  • val()：获取/设置元素的value 属性值，常用于**input标签，select**标签值也可以使用
• 属性操作
  1. 通用属性操作（获取传递 1 个字符串；设置传递 2 个字符串；删除传递 1 个字符串）
     • attr(): 获取/设置元素的属性
     • removeAttr():删除属性
     • prop():获取/设置元素的属性
     • removeProp():删除属性
       • ==attr 和 prop区别？==
         • 如果操作的是元素的固有属性，则建议使用 prop。如 checked，selected、disabled、href、src 等之类
         • 如果操作的是元素自定义属性，则建议使用 attr。若上述属性在未设置属性值时使用 attr，返回 undefined
  2. 对 class 属性操作
     • addClass():添加 class 属性值
     • removeClass():删除 class 属性值
     • toggleClass():切换class 属性，综合上面 2 个方法，类似开关
       • toggleClass("one")：判断如果元素对象上存在 class="one"，则将属性值 one 删除掉。否则添加
     • css()：传递 1 个字符串为获取值；2 个为设置值
• CRUD 操作（除过 empty，其他方法 JS 原生都有实现，empty 可以利用innerHTML=""实现）
  • 内部插入（父子），对已存在的元素为剪贴
    • append(content) ：在 A 元素结尾追加 B
    • prepend(content)：在 A 元素开头追加 B
    • appendTo(content)：在 B 元素结尾追加 A
    • prependTo(content)：在 B 元素开头追加 A
  • 外部插入（兄弟），对已存在的元素为剪贴
    • before(content)：在 A 元素之前插入 B
    • after(content)：在 A 元素之后插入 B
    • insertBefore(content)：在 B 元素之前插入 A
    • insertAfter(content)：在 B 元素之后插入 A
  • 删除
    • empty()：清空匹配元素中所有的子节点（所有 Node），但是保留当前对象以及其属性节点
    • remove([expr])：expr 筛选元素。删除所有匹配的元素，事件数据也会删除，不提供值为删除自己
    • detach([expr])：expr 筛选元素。删除所有匹配的元素，事件数据会保留
  • 替换
    • replaceWith(html)：把匹配的元素替换为指定元素，用 B 替换 A
    • replaceAll(html)：相反，用 A 替换 B
    • clone([flag])：复制，克隆匹配的 DOM 元素并且选中这些克隆的副本。QQ 表情案例
      • flag 为 true 副本具有与真身一样的事件处理能力，默认不用填写代表为 false

# 遍历

• .each(callback)：jQuery 对象使用（选择器获取后使用），遍历后的值可能为 JS 对象，注意方法调用区别

  $(arr).each(function(key, value) {});
  

  • key 为索引；value/this 是每一个元素对象（JS 对象）；
  • 回调函数返回值为 false 相当于 break；返回值为 true 相当于 continue

• $.each(object,[callback])：遍历任意对象（JS 数组等也可以）。

  $.each(arr, function(key, value) {});
  

• for...of：jQuery3.0 后提供的方式，同 ES6 中使用方法一致

# 事件

• 页面加载：

  • ready(fn)：有时标签绑定一个事件但是函数不执行，原因就是 DOM 没有加载完毕。可以放在/body 之前，或 onload 里

    //$(document).ready(function(){   //精简如下
    $(function() {});
    

• 事件绑定：

  • jquery 标准的绑定方式：jq对象.事件方法(回调函数)；

    • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为，如触发事件。

      表单对象.submit();：让表单提交

  • on 绑定事件/off 解除绑定

    • jq对象.on("事件名称",回调函数)
    • jq对象.off("事件名称")
      • 如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑

  • toggle 事件切换

    • jq对象.toggle(fn1,fn2...)：当单击 jq 对象对应的组件后，会执行 fn1.第二次点击会执行 fn2.....

    • 注意：1.9 版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

      <script
        src="../js/jquery-migrate-1.0.0.js"
        type="text/javascript"
        charset="utf-8"
      ></script>
      

• 鼠标事件

  • mouseover
  • mouseout
  • hover(overfn, outfn)
  • toggle
  • 同 js 方法

# 动画

• 显示/隐藏
  • show([speed,[easing],[fn]])
    1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
       1. easing：用来指定切换效果，默认是"swing"，可用参数"linear" ​ * swing：动画执行时效果是 先慢，中间快，最后又慢
          • linear：动画执行时速度是匀速的
    2. fn：在动画完成时执行的函数，每个元素执行一次。
  • hide([speed,[easing],[fn]])
  • toggle([speed,[easing],[fn]])
• 滑动显示/隐藏
  • slideDown([speed,[easing],[fn]])
  • slideUp([speed,[easing],[fn]])
  • slideToggle([speed,[easing],[fn]])
• 淡入淡出
  • fadeIn([speed,[easing],[fn]])
  • fadeOut([speed,[easing],[fn]])
  • fadeToggle([speed,[easing],[fn]])
  • fadeTo([[s],o,[e],[fn]])：调整元素不透明度

# 插件

• 增强 JQuery 的功能

• 实现方式

  1. $.fn.extend(object) ：增强通过 jQuery 获取的对象的功能，如获取$("#id")对象，并增强其功能

     //1.定义jqeury的对象插件
     $.fn.extend({
       //定义了一个check()方法。所有的jq对象都可以调用该方法
       check: function() {
         //让复选框选中
         this.prop("checked", true); //this:调用该方法的jq对象
       },
       uncheck: function() {
         //让复选框不选中
         this.prop("checked", false);
       },
     });
     
     $(function() {
       $("#btn-check").click(function() {
         //获取复选框对象
         $("input[type='checkbox']").check();
       });
     
       $("#btn-uncheck").click(function() {
         //获取复选框对象
         $("input[type='checkbox']").uncheck();
       });
     });
     

  2. $.extend(object)：增强 jQuery 对象自身的功能，$或 jQuery

     $.extend({
       max: function(a, b) {
         //返回两数中的较大值
         return a >= b ? a : b;
       },
       min: function(a, b) {
         //返回两数中的较小值
         return a <= b ? a : b;
       },
     });
     //调用全局方法
     var max = $.max(4, 3); //4
     var min = $.min(1, 2); //1
     

# jQuery 重写案例

# 定时弹出广告(show()/hide())

$(function() {
  showTime = setTimeout("showAd()", 1000);
});
var showAd = function() {
  $("#adImg").show(500);
  clearTimeout(showTime);
  hiddenTime = setTimeout("hiddenAd()", 5000);
};
var hiddenAd = function() {
  $("#adImg").hide(1000);
  clearTimeout(hiddenTime);
};

# 隔行换色(.css)

$(function() {
  $("tbody>tr:even").css("background-color", "yello"); //偶数行设置
  $("tbody>tr:odd").css("background-color", "red"); //奇数行设置
});

# 全选全不选(attr/prop)

$(function() {
  //全选/不选使用prop属性
  $("#ckAll").click(function() {
    $("tbody input").prop("checked", this.checked);
  });
  //反选只会转为DOM对象后再操作
  $("#reCk").click(function() {
    $("tbody input").each(function() {
      this.checked = !this.checked;
    });
  });
});

# 省市联动

$(function () {
    var arr = new Array();
    arr[0] = ['西安', '商洛', '延安', '安康'];
    arr[1] = ['石家庄', '廊坊', '秦皇岛', '雄安'];
    arr[2] = ['深圳', '珠海', '广州', '不知道'];

    $("#sheng").change(function () {
        $("#shi option").remove();
        // $("#shi").empty();

        var value = parseInt(this.value);
        $.each(arr,function (k,v) {
            if(k===value){
                $(v).each(function (k,v) {
                    var text = document.createTextNode(v);
                    var option = document.createElement("option");
                    option.appendChild(text);
                    $("#shi").append(option);
                    // $(option).appendTo($("#shi"));
                })；
            }
        });
    });
});

# 左右列表(双击和 selected 有关)

$(function() {
  //按键
  $("#toRight").click(function() {
    // $("#right").append($("#left option:selected"));
    $("#left option:selected").appendTo($("#right"));
  });
  $("#toLeft").click(function() {
    // $("#left").append($("#right option:selected"));
    $("#right option:selected").appendTo($("#left"));
  });
  $("#allToRight").click(function() {
    $("#left option").appendTo($("#right"));
  });
  $("#allToLeft").click(function() {
    $("#right option").appendTo($("#left"));
  });

  //双击
  $("#left").dblclick(function() {
    $("#left option:selected").appendTo($("#right"));
  });
  $("#right").dblclick(function() {
    $("#right option:selected").appendTo($("#left"));
  });
});

# 使用 validate 完成表单校验

• 依赖 jQuery 库，所以先导入 jQuery 再导入 validate，最后导入国际化信息库(提示为中文)

$(function() {
  $("#form1").validate({
    rules: {
      username: {
        required: true,
        minlength: 6,
      },
      password: {
        required: true,
        maxlength: 16,
        digits: true,
      },
      rePassword: {
        required: true,
        equalTo: "[name='password']",
      },
      email: {
        email: true,
      },
    },
    messages: {
      username: {
        required: "用户名不能为空",
        minlength: "用户名不能少于6位",
      },
      password: {
        required: "密码不能为空",
        maxlength: "密码不能多于16位",
        digits: "密码只能是数字",
      },
      rePassword: {
        required: "确认密码不能为空",
        equalTo: "两次输入的密码不一致",
      },
      email: {
        email: "邮箱格式不正确",
      },
    },
    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
    success: function(label) {
      //验证成功后的执行的回调函数
      //label指向上面那个错误提示信息标签label
      label
        .text(" ") //清空错误提示消息
        .addClass("success"); //加上自定义的success类
    },
  });
});

<!--单选，多选标签得在其后面加label标签，否则提示信息位置不正确-->
<label for="sex" class="error" style="display: none;"></label>